<template>
  <div id="main">
    <div id="head">
      <div class="leftView fl">
        <div class="top">
          <div class="line"></div>
          <div class="smallIcon">
            <img src="../../assets/22.png" height="30" width="30" alt>
          </div>
          <div class="smallTitle">
            <h1>资产汇总</h1>
          </div>
        </div>
        <div class="center">
          <h3>资产总数量：{{assetSummary.total}}个</h3>
          <h3>资产总金额：{{assetSummary.amount}}元</h3>
        </div>
      </div>
      <div class="rightView">
        <div class="top">
          <div class="line"></div>
          <div class="smallIcon">
            <img src="../../assets/22.png" height="30" width="30" alt>
          </div>
          <div class="smallTitle">
            <h1>资产状态占比</h1>
          </div>
        </div>
        <div class="pieView"></div>
      </div>
    </div>
    <div id="body">
      <div class="top">
        <div class="line"></div>
        <div class="smallIcon">
          <img src="../../assets/22.png" height="30" width="30" alt>
        </div>
        <div class="smallTitle">
          <h1>资产分布</h1>
        </div>
      </div>
      <div class="button">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="changeType('type')" plain class="type">资产类别</el-button>
              <el-button type="primary" @click="changeType('dept')" plain class="organization">所属部门</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-input
                v-if="showTextBox"
                placeholder="请输入内容"
                v-model="input5"
                class="input-with-select"
              >
                <el-button @click="getData" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="barView"></div>
    </div>
    <!-- <div id="footer"></div> -->
  </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
//引入柱状图
require("echarts/lib/chart/bar");
//引入工具栏
require("echarts/lib/component/tooltip");
//引入标题
require("echarts/lib/component/title");
//引入饼状图
require("echarts/lib/chart/pie");
require("echarts/lib/component/legend");
import { axiosGet } from "@/api/index.js";
export default {
  name: "Welcome",
  data() {
    return {
      showTextBox: false,
      input5: "",
      type: "type",
      assetSummary: {
        amount: 0,
        total: 0
      },
      assetPercentByState: [],
      assetPercentByType: [],
      barXAxisArr: [],
      assetPercentByTypeOrDept: {}
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.querySelector(".barView"));
      //绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["闲置", "在用", "报废"]
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          name: "资产类目",
          type: "category",
          data: this.barXAxisArr,
          nameLocation: "end", //坐标轴名称显示位置。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: "45"
          }
        },
        yAxis: {
          type: "value",
          name: "资产数量",
          nameLocation: "end", //坐标轴名称显示位置。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: "45"
          }
        },
        series: this.assetPercentByType
      });
      let myCharts = echarts.init(document.querySelector(".pieView"));
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // type: 'scroll',
          orient: "vertical",
          left: "15%",
          top: 20,
          bottom: 20,
          data: ["闲置", "在用", "报废"]
        },
        series: [
          {
            name: "资产占比",
            type: "pie",
            radius: "55%",
            center: ["55%", "50%"],
            data: this.assetPercentByState,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myCharts.setOption(option);
    },
    getData() {
      axiosGet("Asset/GetIndexDataView", {
        type: this.type,
        key: this.input5
      }).then(res => {
        if (res.status === 200 && res.data.success === true) {
          this.assetPercentByState = [];
          var data = res.data.data;
          this.assetSummary = data.assetSummary;
          var assetPercentByState = data.assetPercentByState;
          for (let i = 0; i < assetPercentByState.length; i++) {
            let obj = {};
            switch (assetPercentByState[i].state) {
              case "Idle":
                obj.name = "闲置";
                break;
              case "Using":
                obj.name = "在用";
                break;
              case "Waste":
                obj.name = "报废";
                break;
            }
            obj.value = assetPercentByState[i].count;
            this.assetPercentByState.push(obj);
          }
          if (true) {
            let arr = [];
            let tempArr = data.assetPercentByTypeOrDept;
            let idleArr = [];
            let usingArr = [];
            let wasteArr = [];
            let xAxisArr = [];
            for (let i = 0; i < tempArr.length; i++) {
              const temp = tempArr[i];
              idleArr.push(temp.idle);
              usingArr.push(temp.using);
              wasteArr.push(temp.waste);
              xAxisArr.push(
                this.type == "type" ? temp.assetTypeName : temp.name
              );
            }
            arr.push({
              name: "在用",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideTop"
                }
              },
              data: usingArr
            });
            arr.push({
              name: "闲置",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideTop"
                }
              },
              data: idleArr
            });
            arr.push({
              name: "报废",
              type: "bar",
              stack: "总量",
              label: {
                normal: {
                  show: true,
                  position: "insideTop"
                }
              },
              data: wasteArr
            });
            this.assetPercentByType = arr;
            this.barXAxisArr = xAxisArr;
          }
          this.drawLine();
        }
      });
    },
    changeType(type) {
      this.type = type;
      if (this.type == "type") {
        this.showTextBox = false;
      } else {
        this.showTextBox = true;
      }
      this.getData();
    }
  }
};
</script>


<style lang="scss" scoped>
#main {
  height: 100%;
  width: 100%;
  background-color: #e9e9e9;
}
#head {
  height: 70%;
  width: 100%;
  // background-color: aqua;
  display: flex;
  margin-top: 1%;
}
#body {
  height: 80%;
  width: 98%;
  margin-top: 1%;
  margin-right: 1%;
  margin-left: 1%;
  background-color: #fff;
}

.fl {
  float: left;
}
.fr {
  float: right;
}
.leftView {
  height: 100%;
  width: 48%;
  // flex: 1;
  // float: left;
  background-color: #fff;
  margin-right: 1%;
  margin-left: 1%;
}
.rightView {
  height: 100%;
  width: 48%;
  margin-left: 1%;
  margin-right: 1%;
  // flex: 1;
  // float: right;
  background-color: #fff;
}
.top {
  width: 100%;
  display: inline-flex;
  background-color: #eff3f4;
  img {
    margin:6px 2px;
  }
}
.smallTitle {
  display: block;
  height: 100%;
  h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 10px;
    color: #fd7779;
  }
}
.center {
  h3 {
    padding: 15px 52px;
    font-size: 18px;
    margin: 40px;
  }
}
.line {
  // display: block;
  margin:2px;
  width: 5px;
  height: 40px;
  background-color: #fd7779;
}
.smallIcon {
  margin-left: 2%;
  display: block;
  height: 100%;
  h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 15px 10px;
  }
}
.button {
  width: 100%;
  margin-top: 1%;
  margin-buttom: 1%;
}
.barView {
  height: calc(100% - 120px);
  width: 100%;
}
.pieView {
  height: calc(100% - 70px);
  width: 100%;
}
/* #footer{
  height:15%;
  background-color:darkgoldenrod;
} */
</style>
